<div class="primeng-datatable-container" [busyIf]="isLoading">
  <div class="tech-doc-table">
    <div class="m-portlet" style="margin-top: -15px;">
      <div class="m-portlet__head" style="height: 50px; padding: 15px;">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <span class="m-portlet__head-icon"> <i class="fa fa-book"></i> </span>
            <h3 class="m-portlet__head-text">请选择工艺文件</h3>
            <div class="nav-item m-tabs__item" style="width: 300px; margin-left: 40px;">
              <a href="javascript:;" class="m-portlet__nav-link m-btn--pill">
                <div class="m-input-icon m-input-icon--right">
                  <input
                    type="text"
                    name="filterText"
                    class="form-control m-input m-input--solid"
                    placeholder="Search..."
                    [(ngModel)]="filterText"
                    (keyup)="getTechDoc()"
                  />
                  <span class="m-input-icon__icon m-input-icon__icon--right">
                    <span (click)="getTechDoc()">
                      <i class="la la-search m--font-brand"></i>
                    </span>
                  </span>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div style="padding: 15px;">
        <p-dataTable
          [value]="techDocs"
          selectionMode="single"
          [(selection)]="selectedTechDoc"
          dataKey="codeId"
          (onRowSelect)="rowSelect($event)"
        >
          <p-column field="codeId" header="编号" [style]="{ width: '33%' }"></p-column>
          <p-column field="editor" header="编者" [style]="{ width: '33%' }"></p-column>
          <p-column field="editTime" header="时间">
            <ng-template let-doc="rowData" pTemplate="body">
              {{ doc.editTime | momentFormat: 'YYYY-MM-DD' }}
            </ng-template>
          </p-column>
        </p-dataTable>
      </div>
    </div>
    <form action="">
      <div class="m-portlet" style="margin-top: -30px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
          <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
              <span class="m-portlet__head-icon"> <i class="fa fa-wpforms"></i> </span>
              <h3 class="m-portlet__head-text">材料信息</h3>
            </div>
          </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
          <div>
            <table border="1px" style="border:1px solid #c7c7c7; width: 100%;">
              <tr>
                <th style="width:13%; height: 30px; text-align:center;">名称</th>
                <th style="width:25%; text-align:center;">尺寸</th>
                <th style="width:13%; text-align:center;">规格</th>
                <th style="width:13%; text-align:center;">数量</th>
                <th style="width:18%; text-align:center;">备注</th>
              </tr>
              <tr *ngFor="let m of material">
                <th style="text-align:center; height: 30px;">{{ m.name }}</th>
                <th style="text-align:center;">{{ m.size }}</th>
                <th style="text-align:center;">{{ m.spec }}</th>
                <th style="text-align:center;">{{ m.amount }}</th>
                <th style="text-align:center;">{{ m.remark }}</th>
              </tr>
            </table>

            <table border="0px" style="width: 100%;margin-top:20px;">
              <tr>
                <th style="width:25%; height: 30px; text-align:center;">全部</th>
                <th style="width:25%; text-align:center;">牌号</th>
                <th style="width:25%; text-align:center;">状态</th>
                <th style="width:25%; text-align:center;">标准</th>
              </tr>
              <tr style="background-color: #fff !important;" *ngFor="let m of material">
                <th style="text-align:center; height: 30px;">{{ m.grade }}</th>
                <th style="text-align:center;">
                  <input
                    class="form-control m-input m-input--square"
                    type="text"
                    name="newPaiHao"
                    style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                    [(ngModel)]="m.newPaiHao"
                  />
                </th>
                <th style="text-align:center;">
                  <input
                    class="form-control m-input m-input--square"
                    type="text"
                    name="newMaterialStatus"
                    style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                    [(ngModel)]="m.newMaterialStatus"
                  />
                </th>
                <th style="text-align:center;">
                  <input
                    class="form-control m-input m-input--square"
                    type="text"
                    name="newPaiHaoStandard"
                    style="border: none; border-bottom: 1px solid #aaa; text-align: center;font-weight: 600;width: 80%;margin: auto;"
                    [(ngModel)]="m.newPaiHaoStandard"
                  />
                </th>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <div class="m-portlet" style="margin-top: -30px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
          <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
              <span class="m-portlet__head-icon"> <i class="fa fa-wpforms"></i> </span>
              <h3 class="m-portlet__head-text">设备信息</h3>
            </div>
          </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
          <div>
            <div class="row">
              <div class="col-3" *ngFor="let equip of equips" style="margin-top: 15px;">
                <div style="text-align: center;">{{ equip.spec }}</div>
                <!-- <div>
                  <select
                    class="form-control m-input m-input--square"
                    [name]="square"
                    style="border: none; border-bottom: 1px solid #aaa; text-align: center; text-align-last: center; font-weight: 600;width: 80%;margin: auto;"
                    [(ngModel)]="equip.newSpec"
                  >
                    <option [value]="eq.displayText" *ngFor="let eq of equipments" name="equip.newSpec"> {{ eq.displayText }}</option>
                  </select>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="m-portlet" style="margin: -30px 0px 0px 0px;">
        <div class="m-portlet__head" style="height: 50px; padding: 15px;">
          <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
              <span class="m-portlet__head-icon"> <i class="fa fa-cubes"></i> </span>
              <h3 class="m-portlet__head-text">工序 <small style="float: right;"> 额定工时 </small></h3>
            </div>
          </div>
        </div>
        <div class="m-portlet__body" style="padding: 15px;">
          <div class="m-widget4 m-widget4--chart-bottom row">
            <div class="m-widget4__item col-4" *ngFor="let proc of procs">
              <div class="m-widget4__img" style="width: 25px;">
                <i class="fa fa-angle-right blod m--font-success" style="font-size: 18px;">{{ proc.sequenceNumber }}</i>
              </div>
              <div class="m-widget4__info" style="width: 60%;">
                <span class="m-widget4__text">
                  <div class="blod" style="font-size: 16px;">{{ proc.name }}</div>
                </span>
              </div>

              <span class="m-widget4__img">
                <span class="m-widget4__text">{{ proc.chunk }} 分钟 </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="row align-items-center">
  <div class="col-lg-12">
    <button
      type="button"
      class="btn btn-sm btn-success float-right"
      (click)="save()"
      [disabled]="!selectedTechDoc?.codeId"
      [buttonBusy]="saving"
      [busyText]="'绑定中...'"
    >
      <i class="fa fa-check-circle"></i> <span>绑定工艺规程</span>
    </button>
  </div>
</div>
